<template>
<el-drawer v-model="visible" title="Maven配置"  size="40%" :show-close="false" :append-to-body="true" @close="validData()">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">{{ moduleInfo.moduleName}}</h4>
      <el-button type="danger" @click="close">
		<el-icon><Delete /></el-icon>
      </el-button>
    </template>
	
	<el-form ref="dataFormRef" :model="dataForm" label-width="120px" label-position="top">

		<el-form-item prop="pipelineService" label="待编译服务名称" 
						:rules="{
							required: true,
							message: '流水线部署服务名称不能为空',
							trigger: 'blur',}"
	        >
	            <el-input v-model="dataForm.pipelineService" placeholder="请输入流水线待编译服务名称" style="width:250px"></el-input>
        </el-form-item>

		<el-form-item prop="storePath" label="Maven编译文件存储路径" 
							:rules="{
								required: true,
								message: 'Maven编译存储路径不能为空',
								trigger: 'blur',}"
		>
	 		<el-input v-model="dataForm.storePath" placeholder="请输入Maven编译存储路径" style="width:250px"></el-input>
   		
		</el-form-item>

</el-form>
</el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref,onMounted } from 'vue'

const visible = ref(false)
const dataFormRef = ref()

let moduleInfo:any = {}
const dataForm = reactive({
	pipelineService:'',
	storePath:'./target/',
})

const init =(item:any) => {
	moduleInfo = item
	visible.value = true
}



const validData = async () => {
await	dataFormRef.value.validate((valid: boolean) => {
        if(!valid){
			moduleInfo.isValid = false
            return 
        }else{
			moduleInfo.isValid = true
			moduleInfo.moduleContent = JSON.stringify(dataForm)
		}
		
    })
}

defineExpose({
	init,validData
})
</script>